<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>client和offset家族</title>
</head>
<body>
    <h4>属性:scrollLeft和scrollTop</h4>
    <p>作用:被卷去的头部和左侧</p>
    <p>说明:配合页面滚动来用,可读写</p>
    <hr>

    <h4>属性:clientWidth和clientHeight</h4>
    <p>作用:获得元素宽度和高度</p>
    <p>说明:不包含border,margin,滚动条用于js获取元素大小,只读属性</p>
    <hr>

    <h4>属性:offsetWidth和offsetHeight</h4>
    <p>作用:获得元素宽度和高度</p>
    <p>说明:包含border、padding,滚动条等,只读</p>
    <hr>

    <h4>属性:offsetLeft和offsetTop</h4>
    <p>作用:获取元素距离自己定位父</p>
    <p>说明:获取元素位置的时候使用,只读属性级元素的左、上距离</p>
    <hr>

</body>
</html>